AJAX (Asynchronous JavaScript and XML) হল একটি টেকনোলজি যা ওয়েব পেজকে সার্ভারের সাথে ব্যাকগ্রাউন্ডে ডেটা আদান-প্রদান করতে সক্ষম করে, পেজ রিলোড ছাড়াই। এটি ব্যবহারকারীর অভিজ্ঞতাকে আরো দ্রুত এবং ইন্টারঅ্যাকটিভ করে তোলে। AJAX ব্যবহার করে ডেটা লোড করা, ফর্ম সাবমিট করা, বা সার্ভার থেকে নতুন তথ্য আনতে পারে, যা পেজ রিলোড না করেই সম্পাদিত হয়।
প্রথমে, একটি সিম্পল ফর্ম তৈরি করা হবে, যেখানে ব্যবহারকারী নাম এবং ইমেইল অ্যাড্রেস ইনপুট করবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX Example</title>
</head>
<body>
<h2>AJAX ফর্ম সাবমিট</h2>
<form id="userForm">
<input type="text" id="name" placeholder="Enter your name" required>
<input type="email" id="email" placeholder="Enter your email" required>
<button type="submit">Submit</button>
</form>
<div id="response"></div>
<script src="app.js"></script>
</body>
</html>
এখানে একটি ফর্ম তৈরি করা হয়েছে যেখানে ব্যবহারকারী তার নাম এবং ইমেইল প্রদান করবে।
এখন, আমরা JavaScript কোড লিখব যা ফর্মটি সাবমিট করার সময় AJAX রিকোয়েস্ট পাঠাবে এবং সার্ভার থেকে রেসপন্স গ্রহণ করবে।
document.getElementById('userForm').addEventListener('submit', function(event) {
event.preventDefault(); // ফর্ম সাবমিট হওয়া থেকে রোধ করা
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('response').innerHTML = xhr.responseText; // রেসপন্স ডিভে প্রদর্শন
} else {
console.error('Error:', xhr.status);
}
};
xhr.send('name=' + encodeURIComponent(name) + '&email=' + encodeURIComponent(email)); // ইনপুট পাঠানো
});
এখানে, JavaScript XMLHttpRequest অবজেক্ট ব্যবহার করে AJAX রিকোয়েস্ট তৈরি করা হচ্ছে। ফর্মটি সাবমিট হওয়ার পর ডেটা submit.php ফাইলে পাঠানো হয়।
এবার PHP স্ক্রিপ্ট তৈরি করা হবে, যা ইনপুট ডেটা গ্রহণ করবে এবং ডেটাবেসে সেভ করবে বা অন্য কোনো প্রসেসিং করবে।
<?php
// ডেটাবেস সংযোগ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db"; // ডেটাবেসের নাম
$conn = new mysqli($servername, $username, $password, $dbname);
// সংযোগ পরীক্ষা
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// ইনপুট ডেটা রিসিভ করা
if (isset($_POST['name']) && isset($_POST['email'])) {
$name = $_POST['name'];
$email = $_POST['email'];
// SQL কোয়েরি
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
}
?>
এখানে, PHP স্ক্রিপ্টে $_POST এর মাধ্যমে ফর্মের ডেটা গ্রহন করা হচ্ছে এবং তারপর ডেটাবেসে ইনসার্ট করা হচ্ছে।
এখানে, একটি ডেটাবেস তৈরি করা হয়েছে যার নাম test_db, এবং এর মধ্যে একটি users টেবিল তৈরি করা হয়েছে। টেবিলের স্ট্রাকচার নিম্নরূপ:
CREATE TABLE users (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
email VARCHAR(50) NOT NULL,
reg_date TIMESTAMP
);
এটি ডেটাবেসে ব্যবহারকারীদের নাম এবং ইমেইল সংরক্ষণ করবে।
AJAX অ্যাপ্লিকেশনটি আরও শক্তিশালী করা যেতে পারে JSON (JavaScript Object Notation) এর মাধ্যমে ডেটা পাঠানো এবং গ্রহণ করে। উদাহরণস্বরূপ, JSON ব্যবহার করে ফর্ম ডেটা পাঠানো এবং সার্ভার থেকে JSON রেসপন্স পাওয়া।
JavaScript (AJAX JSON)
document.getElementById('userForm').addEventListener('submit', function(event) {
event.preventDefault();
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
if (xhr.status === 200) {
const response = JSON.parse(xhr.responseText);
document.getElementById('response').innerHTML = response.message;
} else {
console.error('Error:', xhr.status);
}
};
const data = JSON.stringify({ name: name, email: email });
xhr.send(data);
});
PHP (submit.php) - JSON রেসপন্স
<?php
// ডেটাবেস সংযোগ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db"; // ডেটাবেসের নাম
$conn = new mysqli($servername, $username, $password, $dbname);
// সংযোগ পরীক্ষা
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// ইনপুট ডেটা রিসিভ করা
$data = json_decode(file_get_contents('php://input'), true);
if (isset($data['name']) && isset($data['email'])) {
$name = $data['name'];
$email = $data['email'];
// SQL কোয়েরি
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if ($conn->query($sql) === TRUE) {
echo json_encode(["message" => "New record created successfully"]);
} else {
echo json_encode(["message" => "Error: " . $conn->error]);
}
$conn->close();
}
?>
এখানে, JSON ব্যবহার করে ডেটা পাঠানো এবং সার্ভার থেকে JSON রেসপন্স গ্রহণ করা হচ্ছে।
AJAX অ্যাপ্লিকেশন ওয়েব পেজের পারফরম্যান্স এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে, কারণ এটি পেজ রিলোড ছাড়াই ডেটা আদান-প্রদান করতে সক্ষম। AJAX দিয়ে ফর্ম সাবমিট করা, ডেটাবেস থেকে তথ্য পাওয়া এবং ডেটা রিট্রিভ করা যায়। JSON ব্যবহার করে ডেটা আদান-প্রদান করলে অ্যাপ্লিকেশন আরও শক্তিশালী এবং স্থিতিশীল হয়।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
